<template>
    <div id="create-edit-container">
        <!-- use the modal component, pass in the prop -->
        <Modal v-model="stateManager.editDialogVisible"
               :title="modalTitle"
               width="60%"
               @on-cancel="closeDialog"
               :styles="{top: '20px'}"
               :mask-closable="false">

            <i-form ref="model" :model="model" :rules="ruleValidate">
                <Row type="flex">

                    <i-col span="24">
                        <Form-item label="组织" prop="organization_id">
                            <i-select v-model="model.organization_id" style="width: 100%"
                                      :clearable="true"
                                      placeholder="请选择组织">
                                <i-option v-for="item in organizationList" :value="item.value"
                                          :key="item.value">{{item.label}}
                                </i-option>
                            </i-select>
                        </Form-item>
                    </i-col>
                    <i-col span="24">
                        <Form-item label="时间" prop="commendation_time">
                            <DatePicker  :editable="false" format="yyyy-MM-dd HH:mm:ss"  style="width: 100%" type="datetime" v-model="model.commendation_time" placeholder="请输入时间"></DatePicker>
                        </Form-item>
                    </i-col>
                    <i-col span="24">
                        <Form-item label="荣誉名称" prop="commendation_name">
                            <i-input v-model="model.commendation_name" placeholder="请输入荣誉名称"></i-input>
                        </Form-item>
                    </i-col>
                </Row>

            </i-form>

            <template slot="footer">
                <Row type="flex">
                    <i-col span="24">
                        <div class="pull-right">
                            <i-button type="ghost" @click="closeDialog">取消</i-button>
                            <i-button type="primary" @click="saveModel" :loading="isLoading">确定</i-button>
                        </div>
                    </i-col>
                </Row>
            </template>

        </Modal>

    </div>


</template>

<script>
  import {mapState} from 'vuex';
  export default {
    props: {
      stateManager: {
        type: Object
      }
    },
    data: function () {
      const validateMobile = (rule, value, callback) => {
        let regex = /^1(3|4|5|7|8)[0-9]{9}$/;
        if (regex.test(value)) {
          callback();
        } else {
          callback(new Error('请输入有效的电话号码！'));
        }
      };
      return {
        model: this.$modelDataSource({
          url: '/api/organization-commendation',
          dataKey: 'model',
          attributes: {
            id: 0,
            organization_id:'',
            commendation_time:'',
            commendation_name:''
          }
        }),
        isLoading: false,
        ruleValidate: {
          commendation_time: [
            {required: true,type:'object', message: '请填写时间', trigger: 'change'}
          ],
          commendation_name: [
            {required: true,  message: '请填写荣誉名称', trigger: 'blur'}
          ],
          organization_id: [
            {required: true, type: 'number', message: '请选择组织', trigger: 'change'}
          ],
        },
      };
    },
    methods: {
      closeDialog: function () {
        this.stateManager.editDialogVisible = false;
        this.model.reset();
        this.$refs['model'].resetFields();
        this.stateManager.editModelId = 0;
      },
      saveModel: function () {
        let self = this;
        self.$refs['model'].validate((valid) => {
          if (valid) {
            self.model.commendation_time = new Date(self.model.commendation_time).format("yyyy-MM-dd hh:mm:ss")
            console.log('表单验证通过');
            self.isLoading = true;
            self.model.save(function () {
              self.$Notice.success({
                title: '保存成功',
                desc: self.model.name
              });
              self.isLoading = false;
              self.closeDialog();
              self.stateManager.refreshList = true;
            }, function () {
                self.isLoading = false;
            });
          } else {
            console.log('表单验证失败');
          }
        });
      }
    },
    computed: {
      modalTitle: function () {
        if (this.model.id === 0) {
          return '添加组织荣誉';
        } else {
          return '修改组织荣誉';
        }
      },
      organizationList(){
        return this.$store.state.organizations;
      }
    },
    watch: {
      'stateManager.editModelId': function (newValue) {
        let self = this;
        this.model.fetch(newValue, {}, function () {
          self.stateManager.buttonLoading = false;
          self.stateManager.editDialogVisible = true;
        }, function () {
          self.stateManager.buttonLoading = false;
        });
      }
    }
  }
</script>

<style>

</style>
